Sachin's Projects

Parallax web design

Story:

One big web design trend of the moment is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page. It can sometimes be overwhelming, but when used sparingly it can provide a nice, subtle element of depth. Here is a sample: Just a sample!

After I left my job for studies at Purdue, I started doing some freelancing. During that break (well, not so much!), I worked for a fitness food delivery firm called Fitness-bowl.com. The client wanted some creative, yet rich with user experience(Ah yes! The usual demand!) interface to show some of the food items provided by them. I showed the sample which I talked about a while ago, and he was very impressed with it. While the website was being designed, we had already conducted the user research to gather responses and draft persona. We used the data to analyze which kind of interface would fare well. Thats how this design came into picture.

Design:

Using the data from research and person in mind, I came up with multiple paper concepts. Then we selected as a team (design thinking), the design which suited the most. We designed the High_fidelity using Jquery, Javascript and Bootstrap framework for CSS. Below is how it looks! Parallax Webpage

 Parallax example

Takeaway:

One of the biggest takeaway was power of team work. Team work for concept design utilized so many great ideas, which ofcourse had some usability issues. I fixed most of them. On contrast to popular notion that visually rich user interfaces hamper the experience, this design proved beneficial for marketing and in improving customer number. My client was often told that, the gallery looks so delicious!

Concepts:

Usability, User experience, Low-level cognition, interaction design and studies, prototyping and wireframes

Tools:

Adobe Edge Animate, Adobe Photoshop, Balsamiq, Paper Conceptual Design

Balsamiq Interactive Mockups

In manufacturing and design, a mockup, or mock-up, is a scale or full-size model of a design or device, used for teaching, demonstration, design evaluation, promotion, and other purposes. A mockup is a prototype if it provides at least part of the functionality of a system and enables testing of a design.

Story:

When client talked to me about developing the website to enforce his business plan, he mentioned that he had no idea about web development, UX or any of the stuff. Since I had some experience with UX design, I suggested some quick, less-expensive but reliable methods to implement his website. He wanted very minimal things, such as gallery, his contact and some other small features. His main concentration was attracting customers and ofcourse awe them with "Wow"

Design:

Persona is a very important parameter for such implementations. First step was to create a scenario.

"Veer is a tele-series actor who has worked in many famous series. Keeping his body tonned is one the important thing he does on a typical day. He visits gym everyday but is not sure if that is just enough. He asks his trainer about the diet and all he does is talk in terms of calories. To keep a tab of food, its just too much. He is looking for an offer where he can just order food in terms of calores, yet delicious, different and delivered on time. He wants to choose on different options and food packages. One habit he has is to study about the credibility of the firm which delivers food. He wants it be trustworthy and worth the money and time"
Later on, we arranged a design thinking session (at a private room of restuarant) and came up with MVP's for the design. Next, we came up with multiple concepts on paper for each of the feature, we call it the conceptual design phase. There is where the creativity flows around. I enjoy this phase, I feel like an inventor, ofcourse we designers are! 34 different concepts were designed in total, for about 7 features. Once the concepts were confirmed (nothing is confirmed absolutely, its agile) we moved to Rapid prototyping of the website. We subjected prototype to usability test to find some issues and fixed them.

 Balsamiq-Mockup

Takeaway:

Major takeaway here was, never get too attached to your design. Yes! I had created so many innovative designs, but client declined them, either because it was too flashy, or it had complex steps involved. Even the time matters a lot, since this had short development period, trade-off on usability was not an option. Another lesson was, how beneficial are these design thinking sessions? I say very much! We draft MVP, client was so happy that he is being involved in all the phases. "Its just like seeing a child growing up infront of you" - the client said.

Concepts:

Qualitative research methods, design thinking, requirements gathring, product management, design heuristics and principles, usability testing, Interaction design, Rapid prototyping, paper prototyping, Mock-ups, Wireframes, Usecases

Tools:

Balsamiq, Visio

Interaction and Storyboard design

Story:

America’s Best Communities competition is a $10 million initiative to stimulate economic revitalization in small towns and cities. Each community will be awarded $50,000 to develop comprehensive strategies to accelerate the revival of their local economies and improve quality of life.

The team from Lafayette is one of the top 50 finalists in the country, and we, Purdue university were clients for development of VR game, they wanted to present as part of contest. Website: America's Best Communities
They wanted to develop a game which involves kids and educate them. This was not traditional educational game instead, it was to be casual yet subtly educative. They wanted to develop VR game which could effectively catch kids' attention and we were certainly up for it!

Design:

We approached the task with focus group interviews of teachers involved and interviews of kids (handled by experts in that field). After the data reached saturation we organized brainstorming session, what I like to call as design thinking session. We discussed on various concepts, we were locked up in Purdue Envision Center for hours and we finally came up with a concept. A story of an egg! We discussed about various possibilities of implementation of the concepts, I noted all the flows. My job was to create an interaction design for the project. Interaction design for a game involves all the logical flows of the game incorporated by storyboard. After multiple iterations we agreed upon a final design and was ready for game design! Check the video demo and Storyboard sample below!

Takeaway:

This was a very new experience for me. I absolutely am a game freak (Masters is cutting down on that for me) and wanted to work on interaction design in this field. Its lot easier to imagine storyboard for the games compared to a traditional application. But downside is its difficult to apply the design heuristics that I am aware of. It took lot of brainstorming by time as well as from my side to come up with an optimal design decision. Cognition has a major foreplay in such design, expecially high-level, which includes low-lever (incase of games) as well. Once we started concentrating on that, we were at a better position of design phase.

 Storyboard for contest

 Sample storyboard for Tetris

Concepts:

Human Centered Design Principles, Storyboarding concept, Scenario, design thinking, concept diagrams

Tools:

Autodesk SketchPro, Photoshop, Paper protoype

Personas and Formative Research

Story:

The Goal was to create an application to help STEM students to graduate on time. The Pilot study as an academic asssignment was to conduct user research to determine the contributing factors. Determnation of trends, more emphasis on the users were primary focus of the user research. The expected output was a detailed Personas of interest and trend analysis.

Design:

The very first step to take was to decide which method to follow. The two paradigms at our disposal - Quantitative methods or qualitative research methods, or mix of both. Given the time, we did some secondary research, looked up for some existing research relevant to this. We limited our focus only on scholarly research rather than blogs or posts, since it is most reliable. We found some lead and past methods and decided on the quantitative methods for this purpose which could leverage qualitative data for statistical analysis. We collected survey data of about 47 students who were mechanical engineering undergrad. As per why we selected Mechanical students, its detailed in the report attached below. We were team of four who divided data collection equally, and my part was additionally analysis and powerpoint report draft. We analyzed trends and created the affinity diagram to identify affinity amongst the collected data. This resulted in three personas of interest. We drafted persona based on the results, all ready for prototype design

 Formative research

Takeway:

After studying formally the methods of qualitative research methods, I understood that affinity diagraming closely relates to grounded theory. In simple terms, thematic analysis and emerging theory analysis. This is a very powerful tool, and makes such a complicated data easy to deduce and extract the persona of interest. "About Face" book by Alan Cooper was very instrumental in keeping up with methods properly. Drafting Personas was something I enjoyed dearly. This the most valuable gift of Human-Centered Design, rather the manifestation of this scientific method itself.

Concepts:

Affinity Diagraming, Statistics, Quantitative methods of data collection, Persona and thematic analysis, Trend analysis, Secondary and Primary research

Tools:

Photoshop, Powerpoint, Excel, SPSS for statistical analysis

Knowledge Depot

Discussion Forum

Story:

A simple, sleek, and intuitive website to get all the questions answered. That was the aim we had, when we developed this application within period of 2 weeks for a Hackathon. I lead the team, while owning the UI design completely.

The aim of the Hackathon was to instigate innovation, promote design thinking and simpllicity to get an usable application, which is nippy, easy to integrate and completely responsive. The idea was to create a knowledge platform where an user can seek any answer he seeks, based on the green architecture concept (reuse of existing data). More detail can be guaged by watching the short video above, which i created.

Design:

We focused mainly on ease of use, in other terms, delivering ultimate user experience. We identified the problem spaces or KPAs with help of short survey conducted at the office. With this we identified common themes and started developing the application centered towards this data. The application has two important terminals, that is, online terminal and meeting terminal.

Online terminal

Meeting terminal

UIJAM

We integrated in-browser HTML/Javascript/CSS editor. Where, an user may upload desired CSS file, or add CSS rules, add required JQuery/Javascript rules and write any HTML and download it, with integration ready in their application.

Here are few screen shots with sleek supercool UI, which is a clean outcome of detailed design thinking session and stress on User Experience.

Live tile, with description of each terminal

Discussion list, which is ordered by date

Category list, which displays all category

Intelligent index. As soon as new topic is typed, if duplicate, search engine prompts a message.

Admin overview page: An intuitive and responsive, tile model based Admin dashboard

Admin side menu panel, which becomes hidden in responsive mode

Tree view to give great experience, while adding or removing category

hidden side navigation in responsive view, to save space and for better display

UI jam tool, to edit and export, even on the go through mobile or tablet.

Takeways:

Since it was a 76 hours coding and hacking competition, we tried our best to keep the design Human-Centred. Can anyone do that to creat a realiable application? May be, will it be the best design? May be. But what we came up with was fully functional web application with tremendous features, intuitive and sleek UI and user tested and approved interaction. This was responsive and sleek and extremely useful. This project with few modification was actually implemented for a real client project!

Tools:

Asp.NET, Visual Studio, Model-View-controller Concept, Javascript and JQuery, HTML 5, CSS3 - Bootstrap and several .net based and javascript based plugins.

Unity Game Development

Story:

As I mentioned, I am a game freak! I keep trying ne things, new things to learn and enjoy with (sound geeky? I am proud of it :D). I have this crazyness about Ninjas and undead creatures and I combined them into one in this small game sample. It is still under development, but I have put a sample here.

Design and Development:

This is a sample game, developed using Unity game development engine. The project is developed from the scratch, including all the graphic design, assets, sprites and C# script for logic. In the below link, the source code is included as well. This sample is part of a big project, which I hope to publish, soon after the development is complete. The completed project includes coin collection, life addition, when coins are collected, jump, enemies, a UI for starting interface of game and much more.

The game is multiplatform, which can be exported into MAC, Linux, Windows as respective executables, as well as HTML 5 game. The below link is a live browser game. Click the link and allow the plugin in the browser. The plugin will install unity webplayer to browser, then you are free to test the dev build of game, which includes movement animation of character, static animation and scene loads.

Click arrow keys on keyboard to move!

Click here for game sample, ready and running!

 Source code for game

 Published code for game

Takeaway:

Unity is a flexible and powerful development platform for creating multiplatform 3D and 2D games and interactive experiences. I learnt designing sprites, game scenes, linking design to back-end code. It was exciting to dirty hands with new concepts and methods.

Tools:

Unity IDE, Photoshop, C#, Autodesk SketchPro

Conceptual Design

Story:

Formative research has been done, now what? This is where the conceptual design comes into picture. Ofcourse there are couple of other important steps that needs to be done before a design for the application is conducted. We need to look back and see what exactly is the problem statement, what is the scope and the vision for the application. From the personas, a primary persona shall be carefully selected. There are number of ways for this to be done, popular one is, to check what are some of common pain points for persona of interest. This gives an idea to pick the primary persona. From that a requirment list or MVP (Minimum Viable Products) for the project can be picked. We are working on agile methodology, so rest of the requirements can be pushed to the project backlog for future development.

Design:

Typical several hundreds of concepts were created from the requirment, each representing the functionality of the product. We need not implement all of them. Later we can discuss as a team to pick few concepts that are most suitable. This can be done with another design thinking session as well. Example for conceptual design is as follows, for this particular project.

When hundreds of concepts are being designed, at some point we are bound to reach saturation. Same thing happened to us as well. So we used design cards. These are some design twist cards, which give specific instructions, which can be used to do a drastic modification to one of the designs. This can prove extremely useful or sometimes may give awkward solution, but these are just concepts, it upto us later on to choose what goes into the product. There are some extreme cards such as critical design cards, they bring drastic and challanging tasks to the design which are very interesting. Following is the example of cards we used in the project.

Then as a team we discussed and decided on the designs which best fits the need, vision statement and requirements. Below is the balsamiq mock up of the product.

 Application_Mockup

Detailed report of the conceptual design is as follows

Brief overview of entire project.

Takeaways:

It is easy to lose focus on the mail goal while in the heat of the design. HCDD is extrmemly powerful design method, only if its made use of in a proper way. Neglegence and taking light of the method could result in extremely flawed design. The major emphasis is always on vision statement which helps us keep track of the goal. The reason why we are designing lies with this. "Magic" is the key concept here. While we are designing we might encounter with a concept which is absolotely not feasible on first thought, but finish the concept and take a look back at it, believe it is magic and that is key to success.

Concepts:

Conceptual design, paper prototyping, heuristic evaluation, cognitive walkthrough, usability testing and evaluation, rapid prototyping, mock-up design and wireframe design, Scenario draft, storyboarding

Tools:

Powerpoint, Balsamiq, Visio, Photoshop, Autodesk SketchPro